<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "a354978ea0e796c3cf1063b0e3f4fd05",
    };
    AMapLoader.load({
        key: "db8a1298c347732420175157f60b2cb2", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.DistrictSearch"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        AMapUI: {
            version: '1.1',
            plugins: ['overlay/SimpleMarker']
        }
    })
        .then((AMap) => {
            var opts = {
                subdistrict: 0,   //返回下一级行政区
                extensions: 'all',  //返回行政区边界坐标组等具体信息
            };
            //实例化DistrictSearch
            var district = new AMap.DistrictSearch(opts);
            district.search('中国', function (status, result) {
                var bounds = result.districtList[0].boundaries;
                var mask = []
                for (var i = 0; i < bounds.length; i += 1) {
                    mask.push([bounds[i]])
                }
                var disCountry = new AMap.DistrictLayer.World({
                    zIndex: 1,
                    rejectMapMask: true
                })
                var map = new AMap.Map('container', {
                    mask: mask,
                    center: [116.472804, 39.995725],

                    viewMode: '3D',
                    labelzIndex: 130,
                    zoom: 3,
                    cursor: 'pointer',
                    layers: [
                        new AMap.TileLayer.RoadNet({
                            zIndex: 7
                        }),
                        disCountry,
                        new AMap.TileLayer.Satellite()
                    ]
                });
            })
        })
        .catch((e) => {
            console.log(e);
        });
});

onUnmounted(() => {
    map?.destroy();
});
</script>

<template>
    <div id="container"></div>
</template>

<style scoped>
#container {
    width: 100%;
    height: 700px;
    background-color: rgb(216, 238, 250) !important
}
</style>
